<template>
  <el-container>
    <m-side-menu :side-collapse="showSideMenu" class="el-menu-vertical-demo" />
    <el-container>
      <el-header class="top-nav" style="line-height:60px;">
        <div class="cl">
          <div class="z">
            <span class="nav-item" @click="toggleSide"
              ><i class="el-icon-s-fold f20" style="vertical-align: middle;"
            /></span>
          </div>
          <div class="z">
            <breadcrumb />
          </div>
          <div class="y">
            <span class="nav-item">{{ $user.getUserName() }}</span>
            <span class="nav-item" @click="quit()">退出</span>
          </div>
        </div>
      </el-header>
      <el-main class="bg-gray-3">
        <div class="bg-light padding-20">
          <router-view />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Breadcrumb from "@/components/common/Breadcrumb";
export default {
  name: "Home",
  components: {
    Breadcrumb
  },
  data() {
    return {
      showSideMenu: true
    };
  },
  methods: {
    toggleSide() {
      this.showSideMenu = !this.showSideMenu;
    },
    quit() {
      this.$utils.sessionClear();
      this.$router.replace({ path: "/login" });
    }
  }
};
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
